{% stylesheet %}
.block_image2 .block_image2_content {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  grid-column-gap: var(--column-gutter);
  box-sizing: border-box;
}
.block_image2 .block_image2_content .image-two-item {
  flex: 1;
  position: relative;
}

.block_image2 .block_image2_content .image-two-item img {
  width: 100%;
  height: auto;
}
.block_image2 .block_image2_content .image-two-item .default_image_number{
  font-size:18px;
  color:#999;
  position: absolute;
  right:20px;
  bottom:14px;
}
@media screen and (max-width: 767px) {
  .block_image2 .block_image2_content .image-two-item .default_image_number{
    right:8px;
    bottom:5px;
    font-size:14px;
  }
  .block_image2 .block_title{
     padding:0 15px;
  }
  .block_image2 .block_image2_content .image-two-item {
    flex: none;
    width: 100%;
    margin-bottom: {{section.settings.spacing}}px;
  }
  .block_image2 .full_container_wrapper{
    padding-left:0px;
    padding-right:0px;
  }
}


{% endstylesheet %}
<div class="block_image2">
  <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
        {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
    </div>
    {% endif %}
    <div class="block_image2_content" style="--column-gutter:{{section.settings.spacing}}px">
      {% for block in section.blocks %}
      
       <a href="{% if block.image_link.url %}{{ block.image_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ block.image.src }}"  src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ block.image.alt }}" >
        {% if block.image.src =='' %} 
           <span class="default_image_number">Image-{{forloop.index}}</span>
        {% endif %} 
      </a>
      {% endfor %}

      {% comment %} <a href="{{section.settings.image_one_link.url | default : "javascript:;"}}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ section.settings.image_one.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_one.alt }}" >
        
      </a>
      <a href="{{section.settings.image_two_link.url | default : "javascript:;"}}" data-tips="请选择图片链接" class="image-two-item">
        <img data-src="{{ section.settings.image_two.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ section.settings.image_two.alt }}">
      </a> {% endcomment %}
    </div>
  </div>
</div>
{% schema %}
{
  "tag": "image2",
  "class": "block_image2",
  "is_global": false,
  "name": {
    "zh_CN": "单排图片"
  },
  "max_blocks": "5",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title"
    },
    
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_width_fill"
    },
        {
              "type": "card_input_number",
              "id": "spacing",
              "max": 200,
              "min": 0,
              "label":
              {
                  "en_US": "Block spacing",
                  "zh_CN": "间距"
              },
              "info":
              {
                  "zh_CN": "内容宽度单位为px"
              }
          },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容"
      }
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "图片"
      },
      "type": "image-item",
      "settings": [
        {
      "type": "card_image",
      "label": {
        "zh_CN": "图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
      "info": {
        "zh_CN": "建议宽度1000px以上，高度自适应"
      },
      "id": "image"
    },{
      "type": "card_page_link",
      "label": {
        "zh_CN": "链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "image_link"
    }]}
    
  ],
  "default": {
    "settings": {
      "title":"Figure 2",
      "is_width_fill": false,
      "spacing":30,
      "padding":{
        "top": "20",
            "left": "0",
            "right": "0",
            "bottom": "20"
      }
    },
    "blocks": [{
      "block_type": "image-item",
      "image":{
        "src": "",
        "alt": ""
      },
      "image_link":{
        "type": "",
        "title": "",
        "url": ""
      }
    },
    {
      "block_type": "image-item",
      "image":{
        "src": "",
        "alt": ""
      },
      "image_link":{
        "type": "",
        "title": "",
        "url": ""
      }
    },
    {
      "block_type": "image-item",
      "image":{
        "src": "",
        "alt": ""
      },
      "image_link":{
        "type": "",
        "title": "",
        "url": ""
      }
    }]
  }
}
{% endschema %}